<template>
    <el-row class="home" :gutter="20">
        <el-col :span="8" style="margin-top: 20px">
            <el-card shadow="hover">
                <div class="user">
                    <img :src="getImgSrc()" />
                    <div class="userinfo">
                        <p class="name">Admin</p>
                        <p class="access">超级管理员</p>
                    </div>
                </div>
                <div class="login-info">
                    <p>
                        上次登录时间：
                        <span>2021-07-19</span>
                    </p>
                    <p>
                        上次登录地址：
                        <span>南京</span>
                    </p>
                </div>
            </el-card>
            <el-card shadow="hover" style="margin-top: 20px;height: 450px;">
                <el-table :data="tableData">
                    <el-table-column v-for="(val, key) in tableLabel" :key="key" :prop="key" :label="val"></el-table-column>
                </el-table>
            </el-card>
        </el-col>
        <el-col :span="16" style="margin-top: 20px">
            <div class="num">
                <el-card v-for="(item, index) in countData" :key="index" :body-style="{ display: 'flex', padding: 0 }">
                    <!-- <i class="icon" :class="`el-icon-${item.icon}`" :style="{ background: item.color }"></i> -->
                    <component class="icon" :is="item.icon" :style="{ background: item.color }"></component>
                    <div class="detail">
                        <p class="num">￥{{ item.value }}</p>
                        <p class="txt">{{ item.name }}</p>
                    </div>
                </el-card>
            </div>
            <el-card style="height: 280px">
                <echart :chartData="orderData" style="height: 280px" />
                <!-- <div ref="echart" style="height: 280px"></div> -->
            </el-card>
            <div class="graph">
                <el-card style="height: 260px">
                    <div ref="userEchart" style="height: 240px"></div>
                    <!-- <echart style="height: 240px" :chartData="echartData.user" /> -->
                </el-card>
                <el-card style="height: 260px">
                    <div ref="videoEchart" style="height: 240px"></div>
                    <!-- <echart style="height: 240px" :chartData="echartData.video" :isAxisChart="false" /> -->
                </el-card>
            </div>
        </el-col>
    </el-row>
</template>

<script>
import { defineComponent, getCurrentInstance, onMounted, reactive, ref } from 'vue';
import * as echarts from 'echarts';
import echart from '../../components/echart.vue';
// import axios from 'axios'
export default defineComponent({
    setup() {
        const getImgSrc = () => {
            return new URL('../../assets/images/portrait.jpg', import.meta.url).href;
        };
        // let tableData = []
        let tableData = ref([]);
        const { proxy } = getCurrentInstance(); // 通过这个方法拿到 main.js 里面挂载的全局api请求方法
        let tableLabel = {
            name: '课程',
            todayBuy: '今日购买',
            monthBuy: '本月购买',
            totalBuy: '总购买',
        };
        let countData = ref([]);
        const getTableList = async () => {
            // await axios.get('https://www.fastmock.site/mock/a31c730fe5edfc609521dfd742c8bd30/api/home/getTableData').then((res) => {
            //     // console.log(res);
            //     // vue3 实现数据双向绑定 需要借助 ref 如果直接使用 vue2的写法是没法绑定的
            //     if(res.data.code === 200){
            //         tableData.value = res.data.data;
            //     }
            // })
            let res = await proxy.$api.getTableData();
            tableData.value = res;
        };
        const getCountData = async () => {
            let res = await proxy.$api.getCountData();
            countData.value = res;
        };
        onMounted(() => {
            getTableList();
            getCountData();
            getChartData();
            // console.log(reactive());
        });

        // 关于 echarts 渲染部分
        let xOptions = reactive({
            legend: {
                // 图例文字颜色
                textStyle: {
                    color: '#333',
                },
            },
            grid: {
                left: '20%',
            },
            // 提示框
            tooltip: {
                trigger: 'axis',
            },
            xAxis: {
                type: 'category', // 类目轴
                data: [],
                axisLine: {
                    lineStyle: {
                        color: '#17b3a3',
                    },
                },
                axisLabel: {
                    interval: 0,
                    color: '#333',
                },
            },
            yAxis: [
                {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#17b3a3',
                        },
                    },
                },
            ],
            color: ['#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80', '#8d98b3'],
            series: [],
        });
        let pieOptions = reactive({
            tooltip: {
                trigger: 'item',
            },
            color: ['#0f78f4', '#dd536b', '#9462e5', '#a6a6a6', '#e1bb22', '#39c362', '#3ed1cf'],
            series: [],
        });
        let orderData = reactive({
            xData: [],
            series: [],
        });
        let userData = reactive({
            xData: [],
            series: [],
        });
        let videoData = reactive({
            series: [],
        });
        // 获取数据
        const getChartData = async () => {
            let result = await proxy.$api.getChartData();
            let res = result.orderData,
                userRes = result.userData,
                videoRes = result.videoData;
            orderData.xData = res.date;
            const keyArray = Object.keys(res.data[0]);
            const series = [];
            keyArray.forEach((key) => {
                series.push({
                    name: key,
                    data: res.data.map((item) => item[key]),
                    type: 'line',
                });
            });
            orderData.series = series;
            // xOptions.xAxis.data = orderData.xData;
            // xOptions.series = orderData.series;
            // 进行渲染
            // echarts.init(this.$refs['echart']) vue 2
            // let hEchart = echarts.init(proxy.$refs['echart']);
            // hEchart.setOption(xOptions);

            // 柱状图渲染
            userData.xData = userRes.map((item) => item.date);
            userData.series = [
                {
                    name: '新增用户',
                    data: userRes.map((item) => item.new),
                    type: 'bar',
                },
                {
                    name: '活跃用户',
                    data: userRes.map((item) => item.active),
                    type: 'bar',
                },
            ];
            xOptions.xAxis.data = userData.xData;
            xOptions.series = userData.series;
            let userEchart = echarts.init(proxy.$refs['userEchart']);
            userEchart.setOption(xOptions);
            videoData.series = [
                {
                    data: videoRes,
                    type: 'pie',
                },
            ];
            pieOptions.series = videoData.series;
            let videoEchart = echarts.init(proxy.$refs['videoEchart']);
            videoEchart.setOption(pieOptions);
        };

        return {
            getImgSrc,
            tableData,
            tableLabel,
            countData,
            orderData,
            userData,
            videoData,
        };
    },
});
</script>
